<template>
    <div class="wrap">
        <div class="content clearfix">
            <left-menu class="fl"></left-menu>
            <div class="content-box fr">
                <Card
                        class="goods-card"
                        v-for="(item, index) in wantedGoodsList"
                        :key="index">
                    <div class="goods-item">
                        <div class="info-box">
                            <router-link to="#">{{item.wantName}}</router-link>
                            <div class="bottom-info">
                                <div class="t-info"><span class="wantContent">{{item.wantContent}}</span></div>
                            </div>
                            <div class="bottom-info">
                                <div class="t-info">
                                    <span class="price">价格：{{item.sellPrice}}元</span>
                                    <span>时间:{{item.updateTime | dateFormat}}</span>
                                </div>
                                <div class="btn-group">
                                    <Button @click="delBuy(index)" type="error" size="small">删除</Button>
                                </div>
                            </div>
                        </div>
                    </div>
                </Card>
                <!--分页-->
                <div class="pagination">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :page-size="pageSize"
                            :total="total"
                            @current-change="currentChange"
                    ></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import leftMenu from "./UserMenu.vue";
    export default {
        name: "UserWantedGoods",
        components: {
            leftMenu,
        },
        data() {
            return {
                wantedGoodsList: [],
                total: 0, // 求购商品总量
                pageSize: 4, // 每页显示的商品数量
                currentPage: 1, //当前页码
                page: 0,
            }
        },
        created() {
            this.getMyWantedGoods();
        },
        activated: function() {
            this.getMyWantedGoods();
        },
        methods: {
            // 返回顶部
            backtop() {
                const timer = setInterval(function() {
                    const top = document.documentElement.scrollTop || document.body.scrollTop;
                    const speed = Math.floor(-top / 5);
                    document.documentElement.scrollTop = document.body.scrollTop =
                        top + speed;
                    if (top === 0) {
                        clearInterval(timer);
                    }
                }, 20);
            },
            // 页码变化调用currentChange方法
            currentChange(currentPage) {
                this.currentPage = currentPage;
                this.getMyWantedGoods();
                this.backtop();
            },
            /*
             * 分页获取个人发布的求购商品
             * */
            getMyWantedGoods(){
                this.$axios({
                    url:"/api/wanted-goods/findWantedGoodsByStuId/" +this.$store.getters.getUser.userId +"/"+this.currentPage+"/"+this.pageSize
                }).then(res => {
                    this.wantedGoodsList = res.data.records;
                    this.total = res.data.total;
                }).catch(err => {
                    return Promise.reject(err);
                });
            },
            /**
             * 删除一个求购
             */
            delBuy(index) {
                let id = this.wantedGoodsList[index].wantId;
                this.$Modal.confirm({
                    title: '提示',
                    content: '删除不可恢复，是否确定？',
                    onOk: () => {
                        this.$axios({
                            url:"/api/wanted-goods/deleteWantedGoodsById/"+id
                        }).then(res => {
                            if (res.data !== "de_success") {
                                return this.$Message.error("删除失败");
                            }
                            this.$Message.success('删除成功');
                            this.wantedGoodsList.splice(index, 1);
                        }).catch(err => {
                            return Promise.reject(err);
                        });
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .pagination {
        height: 50px;
        text-align: center;
    }

    .wrap {
        height: 100%;
        overflow-y: auto;
        background-color: #f8f8f9;
    }

    .content {
        margin: 30px auto;
        width: 1000px;
        display: flex;
    }

    .content-box {
        min-height: 600px;
        width: 760px;
        background-color: #fff;
        padding: 30px;
    }

    .goods-item {
        display: flex;
    }

    .goods-card {
        margin-bottom: 20px;
    }

    .goods-item .thumb-box {
        /* width: 90px; */
        height: 90px;
        overflow: hidden;
        border-radius: 4px;
    }

    .goods-item .thumb-box img {
        width: 100%;
        min-height: 100%;
    }

    .goods-item .info-box {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
    }

    .goods-item .info-box .title {
        font-size: 15px;
        color: #666;
    }

    .bottom-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #808695;
    }

    .bottom-info .t-info {
        display: flex;
    }

    .bottom-info .t-info span {
        margin-right: 15px;
    }

    .bottom-info .t-info .price {
        color: #f01414;
    }

    .bottom-info .btn-group {
        display: flex;
    }

    .bottom-info .btn-group button {
        margin-left: 15px;
    }
</style>